<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	xmlns:c="http://java.sun.com/jsp/jstl/core">

<ui:composition template="templates2/layout.xhtml">
	<ui:param name="title"
		value="Online Banking System | Saving Account Management"></ui:param>
	<ui:define name="header">
		<ui:include src="templates2/header.xhtml">
			<ui:param name="current" value="Saving Account Management"></ui:param>
			<ui:param name="subtitle" value="Saving Account Management"></ui:param>
		</ui:include>
	</ui:define>
	<ui:define name="content">
		<h:form id="form" prependId="false">
			
			<article class="module width_full">
				<header>
					<h3>Search Account Information</h3>
				</header>
				<div class="module_content">
					<fieldset style="width: 48%; float: left; margin-right: 3%;">
						<label>Account Number </label><span style="color: red"><h:message
								for="accNum"></h:message></span>
						<h:inputText id="accNum"
							value="#{savingAccountManagedBean.accountNumber}"
							converter="javax.faces.Long"
							converterMessage="Invalid account number" style="width: 92%;"
							validatorMessage="Account number must have 12 digits">
							<f:validateLength minimum="12" maximum="12"></f:validateLength>
						</h:inputText>
					</fieldset>
					<fieldset style="width: 48%; float: left;">
						<label>ID Card Number </label><span style="color: red"><h:message
								for="idNum"></h:message></span>
						<h:inputText id="idNum"
							value="#{savingAccountManagedBean.idCardNumber}"
							converter="javax.faces.Long"
							converterMessage="Invalid ID card number" style="width: 92%;"
							validatorMessage="ID Card number must have 9 digits">
							<f:validateLength minimum="9"></f:validateLength>
						</h:inputText>
					</fieldset>

					<div class="submit_link">
						<h:commandButton value="Search"
							action="#{savingAccountManagedBean.search}"/>
						<h:commandButton value="Reset">
							<f:ajax render="form"
								listener="#{savingAccountManagedBean.refresh}"></f:ajax>
						</h:commandButton>
					</div>
					<div class="clear"></div>
				</div>
			</article>
			<c:if test="${not empty savingAccountManagedBean.cusAccounts}">
				<article class="module width_full">
					<header>
						<h3>Account list</h3>
					</header>
					<div class="module_content">
						<fieldset style="width: 100%;">
							<p:dataTable value="#{savingAccountManagedBean.cusAccounts}"
								var="a" paginator="true" rows="10" widgetVar="accTable" filteredValue="#{savingAccountManagedBean.filteredCusAccounts}">
								<p:column sortBy="#{a.accountNumber}" filterBy="#{a.accountNumber}">
									<f:facet name="header">Account Number</f:facet>
									#{a.accountNumber}
						</p:column>
								<p:column sortBy="#{a.accountBalance}" filterBy="#{a.accountBalance}">
									<f:facet name="header">Current Balance</f:facet>
									<h:outputText value="#{a.accountBalance}"><f:convertNumber pattern="#,###,##0.00" /></h:outputText>
									
						</p:column>
								<p:column sortBy="#{a.createdDate}" filterBy="#{a.createdDate}">
									<f:facet name="header">Created Date</f:facet>
									<h:outputText value="#{a.createdDate}">
										<f:convertDateTime pattern="hh:mm:ss dd-MM-yy"></f:convertDateTime>
									</h:outputText>

								</p:column>
								<p:column  sortBy="#{a.accountState}" filterBy="#{a.accountState}">
									<f:facet name="header">Account State</f:facet>
									#{a.accountState}
						</p:column>
								<p:column>
									<f:facet name="header">Action</f:facet>
									<p:commandLink action="#{savingAccManagedBean.selectAccount}"
										rendered="#{a.accountState eq 'ACTIVE'}" ajax="false">
										<h:outputText value="Details" />
										<f:setPropertyActionListener
											target="#{savingAccManagedBean.selectedAccount}" value="#{a}" />
									</p:commandLink>
								</p:column>
							</p:dataTable>
						</fieldset>
					</div>
				</article>
			</c:if>
			<c:if test="${not empty savingAccountManagedBean.customer}">
				<article class="module width_full">
					<header>
						<h3>Account owner information</h3>
					</header>
					<div class="module_content">
						<fieldset style="width: 48%; float: left; margin-right: 3%;">
							<label>Customer ID</label>#{savingAccountManagedBean.customer.customerID}
						</fieldset>
						<fieldset style="width: 48%; float: left;">
							<label>ID Card Number</label>#{savingAccountManagedBean.customer.idCardNumber}
						</fieldset>
						<fieldset style="width: 32%; float: left; margin-right: 1.5%;">
							<label>First name</label>#{savingAccountManagedBean.customer.firstName}
						</fieldset>
						<fieldset style="width: 32%; float: left; margin-right: 1.5%;">
							<label>Middle name</label>#{savingAccountManagedBean.customer.midName}
						</fieldset>
						<fieldset style="width: 32%; float: left;">
							<label>Last name</label>#{savingAccountManagedBean.customer.lastName}
						</fieldset>
						<fieldset style="width: 48%; float: left; margin-right: 3%;">
							<label>Address 1</label>#{savingAccountManagedBean.customer.address}
						</fieldset>
						<fieldset style="width: 48%; float: left;">
							<label>Address 2</label>#{savingAccountManagedBean.customer.address2}
						</fieldset>
						<fieldset style="width: 48%; float: left; margin-right: 3%;">
							<label>Email 1</label>#{savingAccountManagedBean.customer.email}
						</fieldset>
						<fieldset style="width: 48%; float: left;">
							<label>Email 2</label>#{savingAccountManagedBean.customer.email2}
						</fieldset>
						<fieldset style="width: 48%; float: left; margin-right: 3%;">
							<label>Phone 1</label>#{savingAccountManagedBean.customer.phoneNumber}
						</fieldset>
						<fieldset style="width: 48%; float: left;">
							<label>Phone 2</label>#{savingAccountManagedBean.customer.phoneNumber2}
						</fieldset>
						<div class="clear"></div>
					</div>
				</article>
			</c:if>
		</h:form>
	</ui:define>
</ui:composition>
</html>